<!---
  @author: andy
  @description: 普通布局组件
-->
<template>
  <me-watermark :text="config.app.watermarkText" :visible="config.app.watermark" class="watermark-box">
    <div class="normal-layout">
      <!-- 这个地方可以放普通应用项目的公共组件，比如公共的头部，底部等，我们可以在src/components中新增头部组件，然后引入到这里 -->
      <router-view v-slot="{ Component }">
        <transition :name="config.transition.name" appear>
          <KeepAlive :include="accessStore.keepAlivePages">
            <component :is="Component" />
          </KeepAlive>
        </transition>
      </router-view>
    </div>
  </me-watermark>
</template>
<script lang='ts' setup>
import { useConfigStore } from '@/stores/configs/config';
import { storeToRefs } from 'pinia';
import { useAccessStore } from '@/stores/access/access';
const accessStore = useAccessStore();
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
</script>
<style lang='less' scoped>
.watermark-box {
  height: 100%;
  .normal-layout {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .useTheme({
      background-color: page-bg-color;
    });
    .slide-enter-active , .slide-leave-active {
      transition: all 0.2s;
      position: absolute;
    }
    .slide-enter-from {
      opacity: 0;
      transform: translateX(-100px);
    }
    .slide-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }
    .fade-enter-active , .fade-leave-active {
      transition: all 0.2s;
      position: absolute;
    }
    .fade-enter-from , .fade-leave-to {
      opacity: 0;
    }
    .scale-enter-active , .scale-leave-active {
      transition: all 0.2s;
      position: absolute;
    }
    .scale-enter-from , .scale-leave-to {
      opacity: 0;
      transform: scale(0.9);
    }
  }
}
</style>